<template>
  <div class="js-cursor-container">
    <el-row>
      <el-col :span="4">
        <el-menu class="el-menu--vertical-demo">
          <span @click="this.$router.push('/menu/index')" class="headerSpan">lovo商城审核系统</span>
          <el-sub-menu index="1" v-if="limitList.includes(1) || limitList.includes(2)">
            <template #title>
              <el-icon class="iconCls">
                <Document/>
              </el-icon>
              <span class="bigSpan">供应商审核</span>
              <el-badge v-if="vendorManageNum+vendorOrderNum!==0" :value="vendorManageNum+vendorOrderNum" :max="99" class="item"/>
            </template>

            <el-menu-item class="subItem" index="1-1" @click="showVendor" v-if="limitList.includes(1)">供应商管理
              <el-badge v-if="vendorManageNum!==0" class="mark" :value="vendorManageNum"/>
            </el-menu-item>

            <el-menu-item class="subItem" index="1-2" @click="showVendorRefund" v-if="limitList.includes(2)">供货退货审核
              <el-badge v-if="vendorOrderNum!==0" class="mark" :value="vendorOrderNum"/>
            </el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="2" v-if="limitList.includes(2) || limitList.includes(4)">
            <template #title>
              <el-icon class="iconCls">
                <DocumentAdd/>
              </el-icon>
              <span class="bigSpan">用户审核</span></template>
            <el-menu-item class="subItem" index="2-1" @click="showClient" v-if="limitList.includes(1)">用户认证待审核
              <el-badge v-if="userAuthNum!==0" class="mark" :value="userAuthNum"/>
            </el-menu-item>
            <el-menu-item class="subItem" index="2-2" @click="showuser" v-if="limitList.includes(2)">用户认证已审核
            </el-menu-item>
            <el-menu-item class="subItem" index="2-3" @click="showFreeze" v-if="limitList.includes(3)">客户冻结
              <el-badge v-if="userFreezeNum!==0" class="mark" :value="userFreezeNum"/>
            </el-menu-item>
            <el-menu-item class="subItem" index="2-4" @click="showOrder" v-if="limitList.includes(4)">客户订单审核
              <el-badge v-if="userOrderNum!==0" class="mark" :value="userOrderNum"/>
            </el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="3" v-if="limitList.includes(3) || limitList.includes(6)">
            <template #title>
              <el-icon class="iconCls">
                <SemiSelect/>
              </el-icon>
              <span class="bigSpan">促销审核</span></template>
            <el-menu-item class="subItem" index="3-1" @click="showPromotional" v-if="limitList.includes(3)">促销审核
              <el-badge v-if="promotionNum!==0" class="mark" :value="promotionNum"/>
            </el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="4" v-if="limitList.includes(4) || limitList.includes(8)">
            <template #title>
              <el-icon class="iconCls">
                <Document/>
              </el-icon>
              <span class="bigSpan">采购审核</span></template>
            <el-menu-item class="subItem" index="4-1" @click="showCaigoushenhe" v-if="limitList.includes(4)">采购审核
              <el-badge v-if="buyOrderNum!==0" class="mark" :value="buyOrderNum"/>
            </el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="5" v-if="limitList.includes(5) || limitList.includes(10)">
            <template #title>
              <el-icon class="iconCls">
                <DocumentAdd/>
              </el-icon>
              <span class="bigSpan">报价审核</span></template>
            <el-menu-item class="subItem" index="5-1" @click="showbaojiaShenhe" v-if="limitList.includes(5)">报价审核
              <el-badge v-if="tenderNum!==0" class="mark" :value="tenderNum"/>
            </el-menu-item>
          </el-sub-menu>





        </el-menu>
      </el-col>
      <el-col :span="20">
        <div class="navBar">
          <el-row>
            <el-col :span="17"></el-col>
            <el-col :span="4">
              <span style="display: block;margin-top: 12px;color: #c3cfe2;">启动声音提示：<el-switch v-model="isPlay" /></span>
            </el-col>
            <el-col :span="3">
              <span @click="loginOut" style="display: block;margin-top: 15px;color: #c3cfe2;">退出登录</span>
            </el-col>
          </el-row>

        </div>
        <el-row>
          <el-col :span="2"></el-col>
          <el-col :span="22">
            <router-view></router-view>
          </el-col>
        </el-row>

      </el-col>
    </el-row>
    <audio id="audioMusic" class="audio" src="http://hzx.ezy2.top/img/tishi.mp3" controls autoplay="autoplay"  hidden="true" ref="audio"></audio>
  </div>
</template>

<script>

import axios from "axios";
import {ElNotification} from 'element-plus'

export default {
  created() {

    // this.limitList = JSON.parse(sessionStorage.getItem("list"));
    this.getWebSocket();
  },

  data() {
    return {
      vendorManageNum:0,
      vendorOrderNum:0,
      userAuthNum:0,
      userFreezeNum:0,
      userOrderNum:0,
      promotionNum:0,
      buyOrderNum:0,
      tenderNum:0,
      limitList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
      num: 0,
      numa: 10,
      isPlay:false,
      nowPage:'',
    }
  },
  methods: {

    //消息提示框
    open(msg) {
      if (this.isPlay===true){
        this.$refs.audio.currentTime = 0.5; //从0.5s开始播放提示音
        this.$refs.audio.play(); //播放
      }
      ElNotification({
        title: '新的待审核消息',
        message: msg,
        type: 'warning',
        offset: 50,
      })
    },
    //webSocket连接
    getWebSocket() {
      //建立本地websocket连接
      const ws = new WebSocket("ws://localhost:9527/webSocket");
      //建立服务器websocket连接
      // const ws = new WebSocket("ws://175.178.211.38:9527/webSocket");
      //连接成功后触发
      ws.onopen = (e) => {
        console.log('已连接');
        ws.send("发送消息");
      };
      //接收消息时触发
      ws.onmessage = (msg) => {
        //接收到消息后对接收到的数据进行处理，处理成图表需要的结构
        // this.echartsValue[0] = msg.data
        // console.log(msg)
        // if(this.nowPage!==msg.data)
        //   this.num++
        if (msg.data =='供应商管理'&&this.nowPage!==msg.data){
          this.vendorManageNum++
        }
        if (msg.data =='供货退货审核'&&this.nowPage!==msg.data){
          this.vendorOrderNum++
        }
        if (msg.data =='用户认证待审核'&&this.nowPage!==msg.data){
          this.userAuthNum++
        }
        if (msg.data =='客户冻结'&&this.nowPage!==msg.data){
          this.userFreezeNum++
        }
        if (msg.data =='客户订单审核'&&this.nowPage!==msg.data){
          this.userOrderNum++
        }
        if (msg.data =='促销审核'&&this.nowPage!==msg.data){
          this.promotionNum++
        }
        if (msg.data =='采购审核'&&this.nowPage!==msg.data){
          this.buyOrderNum++
        }
        if (msg.data =='报价审核'&&this.nowPage!==msg.data){
          this.tenderNum++
        }
        // this.num = JSON.parse(msg.data)
        this.open("新的" + msg.data)
      };
      //连接断开时触发
      ws.onclose = (event) => {
        console.log("websocket connection close.");
        console.log(event.code);
      };
      //连接出错时触发
      ws.onerror = (event) => {
        console.log("websocket connection error.");
        console.log(event);
      };

    },
    loginOut() {
      axios.get("/project/user/loginOut").then(resp => {
        if (resp.data == "ok") {
          this.$router.push("/")
        }
      })
    },
    showVendor() {
      this.vendorManageNum = 0;
      this.nowPage = '供应商审核'
      this.$router.push("/menu/auditvendor")
    },
    showVendorRefund(){
      this.vendorOrderNum = 0;
      this.nowPage = '供货退货审核'
      this.$router.push("/menu/vendorrefund")
    },
    showClient() {
      this.userAuthNum = 0;
      this.nowPage = '用户认证待审核'
      this.$router.push("/menu/audituser")
    },
    showuser() {
      // this.userAuthNum = 0;
      this.nowPage = '用户认证已审核'
      this.$router.push("/menu/showuser")
    },
    showFreeze(){
      this.userFreezeNum = 0;
      this.nowPage = '客户冻结'
      this.$router.push("/menu/freezeuser")
    },
    showOrder(){
      this.userOrderNum = 0;
      this.nowPage = '客户订单审核'
      this.$router.push("/menu/refund")
    },
    showPromotional(){
      this.promotionNum = 0;
      this.nowPage = '促销审核'
      this.$router.push("/menu/promotionalSchemes")
    },
    showCaigoushenhe(){
      this.buyOrderNum = 0;
      this.nowPage = '采购审核'
      this.$router.push("/menu/caigoushenhe")
    },
    showbaojiaShenhe(){
      this.tenderNum = 0;
      this.nowPage = '报价审核'
      this.$router.push("/menu/baojiashenhei")
    }
  }
}

</script>

<style scoped>
.item {
  position: absolute;
  top: -33px;
  left: 230px;
  margin-top: 10px;
  margin-right: 40px;
}

.mark {
  position: absolute;
  top: -30px;
  left: 230px;
  margin-top: 10px;
  margin-right: 40px;
}

.js-cursor-container {
  /*background-image: url("@/assets/bgi5.jpg");*/
  background-size: 100% 100%;
  background-position: center center;
}

.el-menu--vertical-demo {
  color: #c3cfe2;
  overflow: auto;
  display: block;
  height: 725px;
  width: 300px;
  /*background-image: url("@/assets/nav.jpg");*/
  background-size: 100% 100%;
}

.navBar {
  height: 50px;
  /*background-image: url("@/assets/nav.jpg");*/
  background-size: 100% 100%;
}

.headerSpan {
  text-align: center;
  display: block;
  width: 280px;
  height: 50px;
  font-size: 30px;
  padding-top: 20px;
}

.subItem {
  color: #c3cfe2;
  background: #6150C1;
  font-size: 16px;
}

.subItem:hover {
  background: #9dc5c5;
  color: #6150C1;
}

.bigSpan {
  color: #c3cfe2;
  font-size: 20px;
  text-align: center;
}

.iconCls {
  color: #c3cfe2;
}

</style>